<template>
  <div class="consultation-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2 class="section-title">文化资讯</h2>
      <p class="subtitle">Cultural Information and Heritage Insights</p>
      <div class="nav-item">
        <RouterLink to="/museum" class="nav-link">首页</RouterLink>
      </div>
    </div>

    <!-- 文物展示区域 -->
    <div class="artifacts-section" v-loading="loading">
      <div v-for="(artifact, index) in artifacts" :key="artifact.id" class="artifact-card">
        <div class="artifact-image">
          <img :src="getImageUrl(artifact.image)" :alt="artifact.title" class="artifact-img">
        </div>
        <div class="artifact-info">
          <h3 class="artifact-name">{{ artifact.title }}</h3>
          <p class="artifact-description">{{ artifact.description }}</p>
          <div class="expert-insight">
            <div class="expert-avatar">
              <img :src="getImageUrl(artifact.expertAvatar)" :alt="artifact.expertName" class="expert-img">
            </div>
            <div class="expert-content">
              <h4 class="expert-name">{{ artifact.expertName }}</h4>
              <p class="expert-comment">{{ artifact.expertComment }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页控件 -->
    <div class="pagination-controls" v-if="totalPages > 0">
      <button class="pagination-btn" @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span class="page-indicator">{{ currentPage }} / {{ totalPages }}</span>
      <button class="pagination-btn" @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import api from '@/assets/js/api.js';

// 响应式数据
const artifacts = ref([]);
const loading = ref(true);
const currentPage = ref(1);
const pageSize = ref(5);
const totalItems = ref(0);


// 获取图片URL
const getImageUrl = (imagePath) => {
  if (!imagePath) return '';
  return imagePath.startsWith('http') ? imagePath : `http://localhost:8080/${imagePath}`;
};

// 获取文化资讯数据
async function fetchCulturalInfo() {
  loading.value = true;
  try {
    const params = {
      page: currentPage.value,
      pageSize: pageSize.value
    };
    
    const result = await api.getCulturalInfoWithPagination(params);
    
    if (result.code === 200) {
      artifacts.value = result.data.records;
      totalItems.value = result.data.total;
    } else {
      console.error('获取文化资讯失败:', result.message);
    }
  } catch (error) {
    console.error('请求文化资讯异常:', error);
  } finally {
    loading.value = false;
  }
}
// 页面加载时获取数据
onMounted(() => {
  fetchCulturalInfo();
});
</script>

<style scoped>
@import '../../assets/css/consultation.css';
</style>


